<!-- @format -->

<template>
	<a-form :model="form" ref="refForm" style="padding-right: 40px">
		<a-form-item
			field="driver_name"
			label="姓名"
			feedback
			:rules="rules.driver_name"
		>
			<a-input v-model="form.driver_name" placeholder="请输入姓名" />
		</a-form-item>

		<a-form-item
			field="drive_crad"
			label="身份证号码"
			feedback
			:rules="rules.drive_crad"
		>
			<a-input v-model="form.drive_crad" placeholder="请输入身份证号" />
		</a-form-item>

		<a-form-item field="mobile" label="手机号" feedback :rules="rules.mobile">
			<a-input v-model="form.mobile" placeholder="请输入手机号" :disabled='props.types == 2?true:false' />
		</a-form-item>

		<a-form-item
			field="dept_id"
			label="公司名称"
			feedback
			:rules="rules.dept_id"
		>
			<a-select
				placeholder="请选择公司名称"
				:field-names="fieldNames"
				:filter-option="filterOption"
				v-model="form.dept_id"
				:options="users"
				:disabled='props.types == 2?true:false'
				allow-search
			>
			</a-select>
		</a-form-item>

		<!-- <a-form-item
			field="driver_license"
			label="司机驾驶证号"
			feedback
			:rules="rules.driver_license"
		>
			<a-upload
				:action="
					env.VITE_APP_OPEN_PROXY === 'true'
						? env.VITE_APP_PROXY_PREFIX + '/system/uploadImage'
						: env.VITE_APP_BASE_URL + '/system/uploadImage'
				"
				:headers="{ Authorization: `Bearer ${token}` }"
				:fileList="l_file ? [l_file] : []"
				:show-file-list="false"
				@change="l_change"
				@progress="l_progress"
				@success="l_success"
				name="image"
			>
				<template #upload-button>
					<div
						:class="`arco-upload-list-item${
							l_file && l_file.status === 'error'
								? ' arco-upload-list-item-error'
								: ''
						}`"
					>
						<div
							class="arco-upload-list-picture custom-upload-avatar"
							v-if="form.driver_license"
						>
							<img :src="form.driver_license" />
							<div class="arco-upload-list-picture-mask">
								<IconEdit />
							</div>
						</div>
						<div class="arco-upload-picture-card" v-else>
							<div class="arco-upload-picture-card-text">
								<IconPlus />
								<div style="margin-top: 10px; font-weight: 600">上传</div>
							</div>
						</div>
					</div>
				</template>
			</a-upload>
		</a-form-item> -->



		<!-- <a-form-item field="chejiahao" label="车架号" feedback :rules="rules.chejiahao">
			<a-input v-model="form.chejiahao" placeholder="请输入车架号" />
		</a-form-item> -->


		<a-form-item
			field="xingshizheng"
			label="司机驾驶证"
			feedback
			:rules="rules.jiashizheng"
		>
			<a-upload
				:action="
					env.VITE_APP_OPEN_PROXY === 'true'
						? env.VITE_APP_PROXY_PREFIX + '/system/uploadImage'
						: env.VITE_APP_BASE_URL + '/system/uploadImage'
				"
				:headers="{ Authorization: `Bearer ${token}` }"
				:fileList="jsz_file ? [jsz_file] : []"
				:show-file-list="false"
				:show-remove-button="true"
				@change="jsz_change"
				@progress="jsz_progress"
				@success="jsz_success"
				name="image"
			>
				<template #upload-button>
					<div
						:class="`arco-upload-list-item${
							jsz_file && jsz_file.status === 'error'
								? ' arco-upload-list-item-error'
								: ''
						}`"
					>
						<div
							class="arco-upload-list-picture custom-upload-avatar"
							v-if="form.jiashizheng"
						>
							<img :src="form.jiashizheng" />
							<div class="arco-upload-list-picture-mask" @click.stop="form.jiashizheng = ''">
								<icon-delete />
							</div>
						</div>
						<div class="arco-upload-picture-card" v-else>
							<div class="arco-upload-picture-card-text">
								<IconPlus />
								<div style="margin-top: 10px; font-weight: 600">上传</div>
							</div>
						</div>
					</div>
				</template>
			</a-upload>
		</a-form-item>

		<!-- <a-form-item
			field="xingshizheng"
			label="司机行驶证"
			feedback
			:rules="rules.xingshizheng"
		>
			<a-upload
				:action="
					env.VITE_APP_OPEN_PROXY === 'true'
						? env.VITE_APP_PROXY_PREFIX + '/system/uploadImage'
						: env.VITE_APP_BASE_URL + '/system/uploadImage'
				"
				:headers="{ Authorization: `Bearer ${token}` }"
				:fileList="xsz_file ? [xsz_file] : []"
				:show-file-list="false"
				@change="xsz_change"
				@progress="xsz_progress"
				@success="xsz_success"
				name="image"
			>
				<template #upload-button>
					<div
						:class="`arco-upload-list-item${
							xsz_file && xsz_file.status === 'error'
								? ' arco-upload-list-item-error'
								: ''
						}`"
					>
						<div
							class="arco-upload-list-picture custom-upload-avatar"
							v-if="form.xingshizheng"
						>
							<img :src="form.xingshizheng" />
							<div class="arco-upload-list-picture-mask">
								<IconEdit />
							</div>
						</div>
						<div class="arco-upload-picture-card" v-else>
							<div class="arco-upload-picture-card-text">
								<IconPlus />
								<div style="margin-top: 10px; font-weight: 600">上传</div>
							</div>
						</div>
					</div>
				</template>
			</a-upload>
		</a-form-item> -->


		<a-form-item
			field="daoluxukezheng"
			label="道路许可证"
			feedback
			:rules="rules.daoluxukezheng"
		>
			<a-upload
				:action="
					env.VITE_APP_OPEN_PROXY === 'true'
						? env.VITE_APP_PROXY_PREFIX + '/system/uploadImage'
						: env.VITE_APP_BASE_URL + '/system/uploadImage'
				"
				:headers="{ Authorization: `Bearer ${token}` }"
				:fileList="dlxkz_file ? [dlxkz_file] : []"
				:show-file-list="false"
				:show-remove-button="true"
				@change="dlxkz_change"
				@progress="dlxkz_progress"
				@success="dlxkz_success"
				name="image"
			>
				<template #upload-button>
					<div
						:class="`arco-upload-list-item${
							dlxkz_file && dlxkz_file.status === 'error'
								? ' arco-upload-list-item-error'
								: ''
						}`"
					>
						<div
							class="arco-upload-list-picture custom-upload-avatar"
							v-if="form.daoluxukezheng"
						>
							<img :src="form.daoluxukezheng" />
							<div class="arco-upload-list-picture-mask" @click.stop="form.daoluxukezheng = ''">
								<icon-delete />
							</div>
						</div>
						<div class="arco-upload-picture-card" v-else>
							<div class="arco-upload-picture-card-text">
								<IconPlus />
								<div style="margin-top: 10px; font-weight: 600">上传</div>
							</div>
						</div>
					</div>
				</template>
			</a-upload>
		</a-form-item>


		<a-form-item label="上传身份证" feedback>
			<div class="flex">
				<div class="m-r-10">
					<a-upload
						:action="
							env.VITE_APP_OPEN_PROXY === 'true'
								? env.VITE_APP_PROXY_PREFIX + '/system/uploadImage'
								: env.VITE_APP_BASE_URL + '/system/uploadImage'
						"
						:headers="{ Authorization: `Bearer ${token}` }"
						:fileList="c_f_file ? [c_f_file] : []"
						:show-file-list="false"
						:show-remove-button="true"
						@change="c_f_change"
						@progress="c_f_progress"
						@success="c_f_success"
						tip="身份证正面"
						name="image"
					>
						<template #upload-button>
							<div
								:class="`arco-upload-list-item${
									c_f_file && c_f_file.status === 'error'
										? ' arco-upload-list-item-error'
										: ''
								}`"
							>
								<div
									class="arco-upload-list-picture custom-upload-avatar"
									v-if="form.card_front"
								>
									<img :src="form.card_front" />
									<div class="arco-upload-list-picture-mask" @click.stop="form.card_front = ''">
										<icon-delete />
									</div>
									<!-- <a-progress
										v-if="
											c_f_file.status === 'uploading' && c_f_file.percent < 100
										"
										:percent="c_f_file.percent"
										type="circle"
										size="mini"
										:style="{
											position: 'absolute',
											left: '50%',
											top: '50%',
											transform: 'translateX(-50%) translateY(-50%)',
										}"
									/> -->
								</div>
								<div class="arco-upload-picture-card" v-else>
									<div class="arco-upload-picture-card-text">
										<IconPlus />
										<div style="margin-top: 10px; font-weight: 600">上传</div>
									</div>
								</div>
							</div>
						</template>
					</a-upload>
				</div>
				<a-upload
					:action="
						env.VITE_APP_OPEN_PROXY === 'true'
							? env.VITE_APP_PROXY_PREFIX + '/system/uploadImage'
							: env.VITE_APP_BASE_URL + '/system/uploadImage'
					"
					:headers="{ Authorization: `Bearer ${token}` }"
					:fileList="c_b_file ? [c_b_file] : []"
					:show-file-list="false"
					@change="c_b_change"
					@progress="c_b_rogress"
					@success="c_b_success"
					:show-remove-button="true"
					tip="身份证反面"
					name="image"
				>
					<template #upload-button>
						<div
							:class="`arco-upload-list-item${
								c_b_file && c_b_file.status === 'error'
									? ' arco-upload-list-item-error'
									: ''
							}`"
						>
							<div
								class="arco-upload-list-picture custom-upload-avatar"
								v-if="form.card_back"
							>
								<img :src="form.card_back" />
								<div class="arco-upload-list-picture-mask" @click.stop="form.card_back = ''">
									<icon-delete />
								</div>
								<!-- <a-progress
									v-if="
										c_b_file.status === 'uploading' && c_b_file.percent < 100
									"
									:percent="c_b_file.percent"
									type="circle"
									size="mini"
									:style="{
										position: 'absolute',
										left: '50%',
										top: '50%',
										transform: 'translateX(-50%) translateY(-50%)',
									}"
								/> -->
							</div>
							<div class="arco-upload-picture-card" v-else>
								<div class="arco-upload-picture-card-text">
									<IconPlus />
									<div style="margin-top: 10px; font-weight: 600">上传</div>
								</div>
							</div>
						</div>
					</template>
				</a-upload>
			</div>
		</a-form-item>
	</a-form>

	<div class="flex flex-around">
		<a-button @click="close" class="m-r-40"> 取消 </a-button>
		<a-button @click="submit" type="primary"> 确认添加 </a-button>
	</div>
</template>

<script setup>
	import { ref, defineEmits, onMounted, reactive,defineProps } from "vue";
	import tool from "@/utils/tool";
	import { pinyin } from "pinyin-pro"
	const env = ref(import.meta.env);
	const token = ref(tool.local.get(import.meta.env.VITE_APP_TOKEN_PREFIX));

	import { request } from "@/utils/request.js";
	const filterOption = (v,option)=>{
		return option.keywords.some(keywords=>keywords.includes(v))
	}
	import {
		form,
		rules,
		c_f_file,
		c_b_file,
		c_f_change,
		c_f_progress,
		c_f_success,
		c_b_change,
		c_b_progress,
		c_b_success,
		refForm,
		l_file,
		l_change,
		l_progress,
		l_success,
		xsz_file,
		xsz_change,
		xsz_progress,
		xsz_success,
		jsz_file,
		jsz_change,
		jsz_progress,
		jsz_success,
		dlxkz_file,
		dlxkz_change,
		dlxkz_progress,
		dlxkz_success,
	} from "./driverForm.js";

	import predictionDriver from "@/api/prediction/predictionDriver";
	const emit = defineEmits(["submit", "close"]);
	const props = defineProps({
		form: {
			default: {},
		},
		types:{
			default: '',
		}
	});
	form.value.driver_name = props.form.driver_name
	form.value.drive_crad = props.form.drive_crad
	form.value.mobile = props.form.mobile
	form.value.dept_id = props.form.dept_id
	form.value.driver_license = props.form.driver_license
	form.value.card_front = props.form.card_front
	form.value.card_back = props.form.card_back
	form.value.id = props.form.id
	// const form = props.form
	const submit = () => {
		refForm.value.validate((res) => {
			if (res) return;
			if(props.types ==1){
				predictionDriver
				.save(form.value)
				.then((res) => {
					refForm.value.resetFields();
					c_f_file.value = "";
					c_b_file.value = "";
					l_file.value = "";
					emit("submit");
				})
				.catch((e) => {
					console.log("catch:", e);
				});
			}else{
				predictionDriver
				.update(form.value.id,form.value)
				.then((res) => {
					refForm.value.resetFields();
					c_f_file.value = "";
					c_b_file.value = "";
					l_file.value = "";
					emit("submit");
				})
				.catch((e) => {
					console.log("catch:", e);
				});
			}
			
		});
	};

	function close() {
		emit("close");
	}

	let users = ref([]);

	const fieldNames = {
		value: "id",
		label: "name",
	};

	// system/user/remote
	onMounted(() => {
		request({
			url: "system/dept/remote",
			method: "post",
			data: {
				openPage: false,
				remoteOption: {
					sort: { id: "desc" },
					select: ["id", "name"],
					filter: {
						status: ['=',1]
					},
				},
			},
		})
			.then((result) => {
				result.data.map((v,i)=>{
						v.keywords = [
						v.name,
						pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
						pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
						]
				})
				users.value = result.data;
			})
			.catch((err) => {
				console.log(err);
			});
	});
</script>

<style lang="less" scoped>
	.m-r-10 {
		margin-right: 10px;
	}

	.flex-around {
		justify-content: center;
	}

	.m-r-40 {
		margin-right: 40px;
	}
</style>
